import { useState } from 'react';
import MenuItem from './components/MenuItem';
import config from './config';
import styles from './index.less';

export default function MainMenu() {
  const [activeKy,setActiveKey] = useState('doing');
  return (
    <div className={styles.main_menu}>
      <div className={styles.title_container}>
        <h1 className={styles.title}>主菜单</h1>
      </div>
     
      {
        config.map((item)=>(
          <MenuItem name={item.name} active={activeKy==item.key} onClick={()=>setActiveKey(item.key)} count={item.count} key={item.key}/>
        ))
      }
    </div>
  );
}